<template>
	<view v-if="show" class="bg-grey">
		<tui-navigation-bar isCustom splitLine isOpcity class="animation-slide-top bg-grey">
			<view class="chatNav tui-flex tui-align-right   bg-grey">
				<view class="tui-col-1 tui-btn-box" style="padding-top: 10rpx;">
					<tui-icon v-if="backAction" name="arrowleft" size="40" color="#000" unit="rpx" @click="backLastPage"></tui-icon>
					<tui-icon v-if="leftAction" :name="leftIconName" size="40" color="#000" unit="rpx" @click="leftIconActionFu"></tui-icon>
				</view>
				<view class="tui-col-10 tui-center text-30" :class="rightBtn.btnUse?'tui-col-9 ':'tui-col-10 '">{{ navbarText }}</view>
				<view class="tui-col-1 tui-btn-box " style="padding-top: 10rpx;">
					<!-- <tui-icon v-if="rightAction && rightActionList && rightActionList.length > 0" :name="rightIcon" size="40"  color="#000" unit="rpx"></tui-icon> -->
					
					<tui-icon
						v-if="rightAction && ( !rightActionList || rightActionList.length == 0)"
						@click="rightActionFu({msg:'触发了'})"
						:name="rightIcon"
						size="40"
						unit="rpx"
						color="#000000"
					></tui-icon>
					<tui-icon
						v-else-if="rightAction && rightActionList && rightActionList.length > 0"
						@click="showButModel = !showButModel"
						:name="showButModel ? selectedRightIcon : rightIcon"
						size="40"
						unit="rpx"
						color="#000000"
					></tui-icon>
					<tui-bubble-popup
						v-if="rightAction && rightActionList && rightActionList.length > 0"
						:show="showButModel"
						:mask="false"
						direction="top"
						@close="showButModel = flase"
						right="20rpx"
						width="230rpx"
						translateY="20rpx"
						triangleRight="10rpx"
						triangleTop="-30rpx"
					>
						<view class="padding-sm">
							<block v-for="(item, index) in rightActionList" :key="index">
								<view @tap="rightActionFu(item)" class="tui-menu-item tui-center tui-align-left margin-top-10 margin-left">
									<tui-icon :name="item.icon" size="40" unit="rpx" color="white"></tui-icon>
									<span class="margin-left text-30">{{ item.name }}</span>
								</view>
								<tui-divider height="55"></tui-divider>
							</block>
						</view>
					</tui-bubble-popup>
				</view>
				<view class="tui-col-2 " v-if="rightBtn.btnUse" style="padding: 10rpx;">
					<tui-button @tap="rightActionFu()" :type="rightBtn.btnType" :size="20" width="100rpx" height="40rpx">{{rightBtn.btnText}}</tui-button>
				</view>
			</view>
		</tui-navigation-bar>
	</view>
	<view v-else class="animation-slide-top" style="height: 30rpx;"></view>
</template>

<script>
export default {
	name: 'navBar',
	props: {
		show: {
			type: Boolean,
			default: true
		},
		rightIcon: {
			//未选中的图标 ，只支持 thorUI的icon
			type: String,
			default: 'add'
		},
		selectedRightIcon: {
			//选中的图标 ，只支持 thorUI的icon
			type: String,
			default: ''
		},
		navbarText: {//标题
			type: String,
			default: 'J-IM'
		},
		rightBtn:{
			type: Object,
			default() {
				return {
					btnUse:false,
					btnText:'提交',
					btnType:'primary'
				}
			}
		},
		leftAction: {//左侧的返回上一页按钮 是否展开
			type: Boolean,
			default: false
		},
		leftIconName: {//左侧的返回上一页按钮 是否展开
			type: String,
			default: 'add'
		},
		backAction: {//左侧的返回上一页按钮 是否展开
			type: Boolean,
			default: false
		},
		rightAction: {//是否显示右侧的按钮
			type: Boolean,
			default: false
		},
		rightActionList: {// 右侧按钮的子菜单栏  rightAction为 true 但是 此处为null时，点击右按钮直接触发方法
			type: Array,
			default() {
				return []
			}
		}
	},
	data() {
		return {
			showButModel: false
		};
	},
	methods: {
		backLastPage() {
			uni.navigateBack();
		},
		setShowButModel(){
			this.showButModel = !this.showButModel
		},
		rightActionFu(item) {
			this.$emit('rightActionSelectedFu', item);
		},
		leftIconActionFu({}) {
			this.$emit('leftIconActionFu', {});
		}
	}
};
</script>

<style></style>
